<!-- 
  快速开始示例
  演示如何在新项目中使用 Vue3 Screen Adapter
-->
<template>
  <div class="demo-container">
    <!-- 方式1: 基础使用 -->
    <section class="demo-section">
      <h2>基础使用</h2>
      <ScreenAdapter :design-width="1920" :design-height="1080" mode="scale" @ready="onReady">
        <div class="basic-dashboard">
          <h1>基础数据大屏</h1>
          <div class="grid-layout">
            <div class="grid-item">图表1</div>
            <div class="grid-item">图表2</div>
            <div class="grid-item">图表3</div>
            <div class="grid-item">图表4</div>
          </div>
        </div>
      </ScreenAdapter>
    </section>

    <!-- 方式2: 高级功能 -->
    <section class="demo-section">
      <h2>高级功能</h2>
      <ScreenAdapter
        :design-width="1920"
        :design-height="1080"
        mode="fit"
        :debug="true"
        background="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
        @ready="onReady"
        @scale-change="onScaleChange"
        @error="onError"
      >
        <!-- 主要内容 -->
        <div class="advanced-dashboard">
          <header class="dashboard-header">
            <h1>高级数据可视化大屏</h1>
            <div class="status-indicators">
              <span class="indicator online">在线</span>
              <span class="time">{{ currentTime }}</span>
            </div>
          </header>

          <main class="dashboard-main">
            <aside class="sidebar">
              <div class="widget">
                <h3>实时数据</h3>
                <div class="metric">
                  <span class="value">{{ liveData.users }}</span>
                  <span class="label">在线用户</span>
                </div>
              </div>
            </aside>

            <div class="content-area">
              <div class="chart-grid">
                <div class="chart-card" v-for="chart in charts" :key="chart.id">
                  <h4>{{ chart.title }}</h4>
                  <div class="chart-placeholder">{{ chart.type }} 图表</div>
                </div>
              </div>
            </div>
          </main>
        </div>

        <!-- 自定义加载状态 -->
        <template #loading="{ loadingText }">
          <div class="custom-loading">
            <div class="loading-animation">
              <div class="loading-circle"></div>
              <div class="loading-circle"></div>
              <div class="loading-circle"></div>
            </div>
            <p class="loading-text">{{ loadingText }}</p>
          </div>
        </template>

        <!-- 自定义错误状态 -->
        <template #error="{ error, retry }">
          <div class="custom-error">
            <div class="error-icon">⚠️</div>
            <h3>大屏加载失败</h3>
            <p>{{ error.message }}</p>
            <button class="retry-button" @click="retry">重新加载</button>
          </div>
        </template>
      </ScreenAdapter>
    </section>
  </div>
</template>

<script>
// 导入方式1: 如果已全局注册
// import { getCurrentTime, generateMockData } from './utils'

// 导入方式2: 局部导入
import ScreenAdapter from "../index.vue";

export default {
  name: "QuickStartDemo",
  components: {
    ScreenAdapter,
  },
  data() {
    return {
      currentTime: "",
      liveData: {
        users: 1234,
        orders: 567,
        revenue: 89012,
      },
      charts: [
        { id: 1, title: "访问趋势", type: "折线" },
        { id: 2, title: "用户分布", type: "地图" },
        { id: 3, title: "销售数据", type: "柱状" },
        { id: 4, title: "转化漏斗", type: "漏斗" },
      ],
    };
  },
  mounted() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
    this.mockDataTimer = setInterval(this.updateMockData, 3000);
  },
  beforeUnmount() {
    if (this.timer) clearInterval(this.timer);
    if (this.mockDataTimer) clearInterval(this.mockDataTimer);
  },
  methods: {
    onReady(scaleInfo) {
      console.log("大屏准备就绪:", scaleInfo);
    },
    onScaleChange(scaleInfo) {
      console.log("缩放变化:", scaleInfo);
    },
    onError(error) {
      console.error("大屏错误:", error);
    },
    updateTime() {
      this.currentTime = new Date().toLocaleTimeString();
    },
    updateMockData() {
      this.liveData.users = Math.floor(Math.random() * 2000) + 1000;
      this.liveData.orders = Math.floor(Math.random() * 1000) + 500;
      this.liveData.revenue = Math.floor(Math.random() * 100000) + 50000;
    },
  },
};
</script>

<style scoped>
.demo-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.demo-section {
  margin-bottom: 40px;
}

.demo-section h2 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* 基础样式 */
.basic-dashboard {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.basic-dashboard h1 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 48px;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  flex: 1;
}

.grid-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  backdrop-filter: blur(10px);
}

/* 高级样式 */
.advanced-dashboard {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.3);
  color: white;
  backdrop-filter: blur(10px);
}

.dashboard-header {
  padding: 20px 40px;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dashboard-header h1 {
  font-size: 36px;
  margin: 0;
}

.status-indicators {
  display: flex;
  gap: 20px;
  align-items: center;
}

.indicator {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.indicator.online {
  background: #4caf50;
  color: white;
}

.time {
  font-family: "Courier New", monospace;
  font-size: 18px;
}

.dashboard-main {
  flex: 1;
  display: flex;
  padding: 20px;
  gap: 20px;
}

.sidebar {
  width: 300px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
}

.widget {
  margin-bottom: 30px;
}

.widget h3 {
  margin-bottom: 15px;
  color: #4fc3f7;
}

.metric {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.metric .value {
  display: block;
  font-size: 32px;
  font-weight: bold;
  color: #4caf50;
}

.metric .label {
  display: block;
  font-size: 14px;
  margin-top: 5px;
  opacity: 0.8;
}

.content-area {
  flex: 1;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
}

.chart-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card h4 {
  margin: 0 0 15px 0;
  color: #4fc3f7;
}

.chart-placeholder {
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  opacity: 0.7;
}

/* 自定义加载样式 */
.custom-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
}

.loading-animation {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.loading-circle {
  width: 12px;
  height: 12px;
  background: #4fc3f7;
  border-radius: 50%;
  animation: loading-bounce 1.5s infinite ease-in-out;
}

.loading-circle:nth-child(2) {
  animation-delay: 0.3s;
}

.loading-circle:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes loading-bounce {
  0%,
  80%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.loading-text {
  font-size: 18px;
  margin: 0;
}

/* 自定义错误样式 */
.custom-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  text-align: center;
}

.error-icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.custom-error h3 {
  color: #f44336;
  margin-bottom: 10px;
}

.custom-error p {
  margin-bottom: 30px;
  opacity: 0.8;
}

.retry-button {
  padding: 12px 24px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.retry-button:hover {
  background: #45a049;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .dashboard-main {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  .chart-grid {
    grid-template-columns: 1fr;
  }
}
</style>
